<script setup lang="ts">
import { ref, watch } from 'vue'
import type { EchartsUIType } from '@vben/plugins/echarts';
import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
import { $t } from '@vben/locales';
import { Info } from '@vben/icons';
import { getExamScoreDistributionApi } from "#/api/manage/examination-mgr"
import { distriGrades } from '../const'

const chartRef = ref<EchartsUIType>();
const { renderEcharts } = useEcharts(chartRef);

const props = defineProps({
  activeOrg: {
    type: Object,
    default: () => null
  },
  examId: {
    type: String,
    default: ''
  }
});
const loading = ref(false)
const submitted = ref(0)
const corrected = ref(0)
const total = ref(0)

const scoreDist = ref(distriGrades)

const onQuery = () => {
  loading.value = true
  getExamScoreDistributionApi({
    organizationId: props.activeOrg.id,
    examId: props.examId
  }).then((res) => {
    if (res) {
      scoreDist.value.forEach((item) => {
        const key = item.key
        item.value = res[key]
        item.percent = total.value > 0 ? Math.round((res[key] / total.value) * 100) : 0
      })
      const isAllZero = scoreDist.value.every(item => item.value === 0)
      renderEcharts({
        grid: {
          bottom: 0,
          containLabel: true,
          left: '1%',
          right: '1%',
          top: '2 %',
        },
        tooltip: {
          trigger: 'item',
          borderWidth: 0,
         
          formatter: (params: any) => {
            return `
              <div>
                <div style="font-weight:bold;">${params.name}</div>
                <div><span style="display: inline-block; width: 8px; height:8px; border-radius: 4px; margin-right:3px;background-color: ${params.color}"></span>${$t('exam.proporerNumTxt')} ${params.value}${$t('common.peopleTxt')} ${params.percent}%</div>
              </div>
            `
          }
        },
        color: ['#1677ff', '#52C41A', '#FFA940', '#FA541C'],
        series: [
          {
            name: $t('exam.examGradesDistriTxt'),
            type: 'pie',
            radius: ['68%', '90%'],
            avoidLabelOverlap: false,
            label: { show: false },
            emphasis: { scale: true },
            data: isAllZero ? [{ value: 0, name: '暂无数据', itemStyle: { color: '#f0f0f0' } }] : scoreDist.value.map((item) => ({
              value: item.value,
              name: item.name
            }))
          },
        ],
      });
    }
  }).finally(() => {
    loading.value = false;
  })
}

watch(
  () => props.activeOrg,
  (value) => {
    if (value) {
      submitted.value = props.activeOrg.committedCount ?? 0
      corrected.value = props.activeOrg.correctedCount ?? 0
      total.value = props.activeOrg.total ?? 0
      onQuery()
    }
  },
  {
    immediate: true,
  },
);

</script>
<template>
  <section>
    <!-- examination situation -->
    <div class="p-[16px] border-b font-bold border-color:#DCDFE6">{{ $t('exam.examOverviewTxt') }}</div>
    <div class="p-[16px] grid grid-cols-4 gap-[0px]">
      <div class="pl-[10px] pr-[16px]">
        <div class="flex items-center text-[14px] text-[#191919] mb-2">
          <span class="mr-[5px]">{{ $t('exam.examSubmitTxt') }}</span>
          <el-tooltip effect="dark" :content="$t('exam.examSubmitNumTxt')" :show-after="1000" placement="top">
            <Info class="scale-[.7] cursor-pointer" />
          </el-tooltip>
        </div>
        <div class="flex items-center justify-between">
          <div class="text-[36px] text-[#0067D1] font-bold">{{ submitted }}<span
              class="text-[16px] ml-[10px] font-normal text-[#595959]">/{{ total }}{{ $t('common.peopleTxt') }}</span>
          </div>
          <el-progress type="circle" color="#1677ff" :percentage="Math.round((submitted / total || 0) * 100)"
            :width="100" :stroke-width="12" :show-text="false" />
        </div>
        <div class="inline-block text-[#E5484D] text-[14px] bg-[#e5484d33] p-[3px] pl-[10px] pr-[10px] rounded-[4px]">
          {{ $t('exam.unsubmittedNumtxt') }}<span class="font-bold">{{ total - submitted
            }}</span>{{ $t('common.peopleTxt') }}</div>
      </div>
      <!-- Grading situation -->
      <div class="pl-[10px] pr-[16px] border-l border-r border-color:#DCDFE6">
        <div class="flex items-center text-[14px] text-[#191919] mb-2">
          <span class="mr-[5px]">{{ $t('exam.examCorrectTxt') }}</span>
          <el-tooltip effect="dark" :content="$t('exam.examCorrectNumTxt')" :show-after="1000" placement="top">
            <Info class="scale-[.7] cursor-pointer" />
          </el-tooltip>
        </div>
        <div class="flex items-center justify-between">
          <div class="text-[36px] text-[#0067D1] font-bold">{{ corrected }}<span
              class="text-[16px] ml-[10px] font-normal text-[#595959]">/{{ total }}{{ $t('common.peopleTxt') }}</span>
          </div>
          <el-progress type="circle" color="#1677ff" :percentage="Math.round((corrected / total || 0) * 100)"
            :width="100" :stroke-width="12" :show-text="false" />
        </div>
        <div class="inline-block text-[#E5484D] text-[14px] bg-[#e5484d33] p-[3px] pl-[10px] pr-[10px] rounded-[4px]">
          {{ $t('exam.ungradedNumTxt') }}<span class="font-bold">{{ total - corrected }}</span>{{ $t('common.peopleTxt')
          }}
        </div>
      </div>
      <!-- Grades Distribution -->
      <div class="col-span-2 pl-[16px]">
        <div class="flex items-center text-[14px] text-[#191919] mb-2">
          <span class="mr-[5px]">{{ $t('exam.examGradesDistriTxt') }}</span>
          <el-tooltip effect="dark" :content="$t('exam.examGradesDistriTipTxt')" :show-after="1000" placement="top">
            <Info class="scale-[.7] cursor-pointer" />
          </el-tooltip>
        </div>
        <div class="bg-white rounded-lg flex items-center justify-center">
          <div class="w-[110px] h-[110px]">
            <EchartsUI style="height: inherit;" ref="chartRef" />
          </div>
          <div class="ml-[50px]">
            <div v-for="item in scoreDist" :key="item.name" class="flex items-center mb-2 text-[12px]">
              <span :class="['inline-block w-[8px] h-[8px] rounded-full mr-2', item.color]" />
              <span class="w-[50px] text-[#595959] mr-[12px]">{{ item.name }}</span>
              <span class="inline-block w-[80px] text-[#191919] font-bold text-right">{{ item.value }}{{ $t('common.peopleTxt') }} {{
                item.percent
              }}%</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<style lang="scss" scoped></style>
